<template>
  <div id="withdrawDeposit">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <div class="main">
        <div class="balance">
          <div>
            {{$t('m.availableBalance')}}：
            <label>{{userObj.cnnAmount+userObj.cnnWithdrawAmount}} CNN</label>
          </div>
          <span @click="$router.push(`/recharge`)">{{$t('m.recharge')}}</span>
        </div>
        <div class="inputItem">
          <input
            type="text"
            v-model="num"
            style="position:absolute;top:0.8rem;left:0;background:transparent;"
            @keyup="keyUp"
          />
          <p>{{$t('m.buyAmount')}}：</p>
          <input type="text" v-model="num1" :placeholder="$t('m.buyAmountP')" />
        </div>
        <div class="inputItem">
          <p>VC{{$t('m.quantity')}}：</p>
          <input
            type="text"
            v-model="transactionRatio"
            placeholder="VC"
            readonly
            style="color:#888;opacity:.7"
          />
        </div>
        <!-- 提示 -->
        <div class="tips">
          <p>{{$t('m.buyNotes')}}：</p>
          <p class="colorf10 smallfont">{{$t('m.buyTip1')}}</p>
          <!-- <p class="colorf10 smallfont">{{$t('m.buyTip2')}}</p>
          <p class="colorf10 smallfont">{{$t('m.buyTip3')}}</p>
          <p class="colorf10 smallfont">{{$t('m.buyTip4')}}</p>-->
        </div>
        <div class="loginBtn" @click="buy">{{$t('m.buyNow')}}</div>
      </div>
      <RootLoading v-show="rootLoading"></RootLoading>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import { Toast, Dialog } from "vant";
import RootLoading from "@/components/rootLoading";
export default {
  data() {
    return {
      loginToken: "",
      account: "",
      num: "",
      num1: "",
      remark: "",
      userObj: {
        availablePoints: 0
      },
      transactionRatio: "0 VC",
      rootLoading: false
    };
  },
  created() {
    this.changeTitle(this.$t("m.buy") + "VC");
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.getuser();
  },
  components: { Header, RootLoading },
  computed: {
    //  ...mapState({})
  },
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),

    keyUp() {
      this.num = this.num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      this.num = this.num.replace(/^\./g, ""); //验证第一个字符是数字而不是.
      this.num = this.num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      this.num = this.num
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this.num = this.num.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
      this.num1 = this.num == 0 ? "" : this.num + " CNN";
      // 转化GCC
      Services.getConfig({
        brokerage: this.num == "" ? 0 : this.num,
        lang: localStorage.getItem("language")
      }).then(res => {
        if (res.code == "0000") {
          this.transactionRatio =
            res.vcRatio == 0 ? "0 VC" : res.vcRatio * this.num + " VC";
        } else {
          Toast(res.msg);
        }
      });
    },
    //提交
    buy() {
      if (!this.num) {
        Toast(this.$t("m.buyAmountP"));
        return;
      } else if (this.num < 10) {
        Toast(this.$t("m.buyTip1_1"));
        return;
      } else if (
        this.num >
        this.userObj.cnnAmount + this.userObj.cnnWithdrawAmount
      ) {
        Toast(this.$t("m.tips12"));
        return;
      }
      Dialog.confirm({
        title: this.$t("m.buyTip5"),
        confirmButtonText: this.$t("m.confirmButtonText"),
        cancelButtonText: this.$t("m.cancelButtonText")
      })
        .then(() => {
          this.rootLoading = true;
          Services.buyVc({
            token: this.loginToken,
            amount: this.num,
            amountType: 1,
            lang: localStorage.getItem("language")
          }).then(res => {
            if (res.code == "0000") {
              this.rootLoading = false;
              Toast(this.$t("m.buySuccess"));
              var that = this;
              setTimeout(function() {
                that.$router.go(-1);
              }, 1000);
            } else {
              this.rootLoading = false;
              Toast(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
          this.rootLoading = false;
        });
    },
    getuser() {
      Services.getUser({
        token: this.loginToken,
        lang: localStorage.getItem("language")
      }).then(res => {
        if (res.code == "0000") {
          this.userObj = res.user;
          localStorage.setItem("userObj", JSON.stringify(this.userObj));
        } else {
          Toast(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#withdrawDeposit {
  height: 100%;
  .rootMain {
    top: 0.88rem;
    height: calc(100% - 0.88rem);
    overflow: auto;
  }
  .main {
    color: #40404c;
    width: 100%;
    padding: 0.5rem;
    .balance {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1.5rem;
      font-size: 0.28rem;
      label {
        font-size: 0.3rem;
        color: #fd6262;
      }
      span {
        color: #e4b577;
      }
    }
    .inputItem {
      position: relative;
      p {
        margin-bottom: 0.1rem;
        font-size: 0.28rem;
        height: 0.7rem;
      }
      input {
        display: block;
        margin: 0 auto;
        margin-bottom: 0.3rem;
        padding: 0 0.2rem;
        border-radius: 0.1rem;
        border: none;
        height: 0.75rem;
        outline: none;
        width: 100%;
        box-sizing: border-box;
        font-size: 0.26rem;
        background: linear-gradient(to right, #f8f8f8, #d3d3d5);
        color: #40404c;
        &::-webkit-input-placeholder {
          color: #999;
        }
      }
    }
    .tips {
      font-size: 0.28rem;
      p:first-child {
        padding-bottom: 0.3rem;
        font-size: 0.28rem;
      }
      p:last-child {
        margin-bottom: 0.8rem;
      }
      .colorf10 {
        color: #888;
      }
      .color999 {
        color: #999;
      }
      .smallfont {
        font-size: 0.24rem;
      }
    }
    .loginBtn {
      margin: 0 auto;
      margin-top: 0.3rem;
      width: 4.16rem;
      height: 0.78rem;
      line-height: 0.78rem;
      font-size: 0.3rem;
      letter-spacing: 0.05rem;
      text-align: center;
      border-radius: 0.1rem;
      color: #fff;
      background: linear-gradient(to right, #43434e, #727181);
    }
  }
}
</style>